<template>
  <section style="height: 100%">
    <City></City>
    <!--显示头部--区域选择、正在热映和即将上映-->
    <header class="home-header border-bottom">
      <div class="city fl" @click="showCityList"><!--触发state.show = true-->
        <span class="vm city-name f14">{{ $store.state.name }}</span><!--区域选择城市显示-->
        <span class="city-arrow-icon vm"></span><!--区域选择下拉小箭头-->
      </div>
      <div class="sel-lists f14 fl pr" @click="moveTab"><!--通过事件代理改变selnav的状态以及底部移动的线条-->
        <div hot='sel' :class="{selnav: selnav}">正在热映</div>
        <div :class="{selnav: !selnav}">即将上映</div>
        <span class="move pa" :style="{left: moveDistance}"></span>
      </div>
    </header>
    <section  v-show="selnav"  class="content">
      <Swiper :imgs="imgs"></Swiper>
      <Hot :hotLists="hotLists"></Hot>
    </section>
    <section  v-show="!selnav"  class="content">
      <Coming :comingLists="comingLists" ></Coming>
      <div class="click-load-more" @click="clickLoadMore"><!--点击加载更多-->
        <span v-show="clickLoadStatus === 'start'">点击查看更多</span><!--默认clickLoadStatus是start-->
        <div v-show="clickLoadStatus === 'loading'" class="loading-icon">
          <span>加载中</span>
          <mt-spinner style="display: inline-block" type="fading-circle" color="rgb(100, 100, 100)" :size="19"></mt-spinner>
        </div>
        <span v-show="clickLoadStatus === 'complete'">已经全部显示</span>
      </div>
    </section>
    <play-video></play-video>
  </section>
</template>

<script>
  import { mapGetters, mapMutations } from 'vuex'
  import Swiper from "../../components/home/Swiper"
  import Coming from "../../components/home/Coming";
  import City from "../../components/home/City";
  import playVideo from "../../components/playVideo";
  import Hot from "../../components/home/Hot";
  export default{
    data () {
      return {
        moveDistance: '5%',
        imgs: [],
        comingLists: [],
        loaingLists: [],
        selnav: true,
        clickLoadStatus: 'start',
        offset: 0,
        limit: 20,
        total: 0
      }
    },
    components: {
      Swiper,
      Hot,
      City,
      Coming,
      playVideo
    },
    computed: mapGetters([
      'hotLists'
    ]),
    methods: {
      ...mapMutations([
        'pushLoadStack',
        'completeLoad',
        'showCityList',
        'pushComingList'
      ]),
      moveTab (event) {
        console.log(event.target)
        event.target.getAttribute('hot') ? this.selectHotTab() : this.slectComingTab()
      },
      selectHotTab () {
        this.selnav = true
        this.moveDistance = '5%'
        this.pushComingList({lists: []})
      },
      slectComingTab () {
        this.selnav = false
        this.moveDistance = '55%'
        this.pushComingList({lists: this.loaingLists})
      },
      getWeekDay (num) {
        let weeks = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
        return weeks[num]
      },
      clickLoadMore () {
        if (this.clickLoadStatus != 'complete') {
          this.clickLoadStatus = 'loading'
          setTimeout(() => {
            this.$axios.get(`/movie/coming/?limit=${this.limit}&offset=${this.offset}`).then((response) => {//向服务器请求20条数据
              let data = response.data
              let lists = data.data.returnValue
              this.loaingLists = this.loaingLists.concat(lists)
              //模拟索引数据的id号
              this.loaingLists.forEach((item, index) => {
                item.mID = index
              })
              this.pushComingList({lists: this.loaingLists})
              this.comingLists = this.sortComingData(this.loaingLists)
              this.offset = this.offset + this.limit
              if (this.offset < this.total) {
                this.clickLoadStatus = 'start'
              } else {
                this.clickLoadStatus = 'complete'
              }
            })
          }, 500)
        }
      },
      requestData (url, fn) {//请求数据
        this.pushLoadStack()
        // this.$http.get(url).then(fn).then(this.completeLoad)
        this.$axios.get(url).then(fn).then(this.completeLoad)//请求数据成功时结束loading
      },
      sortComingData (lists) {//为从服务器拿回的数据进行处理，外层包装一个数组comingLists，里面有时间和日期
        let comingLists = []
        lists.forEach((item) => {
          let hasItem = false
          for (let i = 0; i < comingLists.length; i++) {
            if (item.openTime === comingLists[i].openTime) {
              comingLists[i].movies.push(item)
              hasItem = true
              break
            }
          }
          if (!hasItem) {
            let comingItem = {
              openTime: '',
              day: '',
              movies: []
            }
            comingItem.openTime = item.openTime
            comingItem.day = this.getWeekDay(new Date(item.openTime).getDay())
            comingItem.movies.push(item)
            comingLists.push(comingItem)
          }
        })
        console.log(comingLists)
        return comingLists
      }
    },
    created () {
      this.pushComingList({lists: []})
      this.requestData('/movie/swiper', (response) => {
        console.log(response)
        let data = response.data
        this.imgs = data.data.returnValue
      })

      this.requestData(`/movie/coming/?limit=${this.limit}&offset=${this.offset}`, (response) => {//点击即将上映就发送请求，默认20条数据
        let data = response.data
        let lists = data.data.returnValue
        //模拟索引数据的id号
        lists.forEach((item, index) => {
          item.mID = index
        })
        this.loaingLists = lists
        this.total = data.total//总共100条数据
        this.comingLists = this.sortComingData(lists)
        this.offset = this.offset + this.limit
      })
    }
  }
</script>

<style>
  .home-header {
    height: 40px;
    font-size: 0px;
    background-color: #fff;
  }
  .selnav {
    color: #ff4d64;
  }
  .city {
    width: 35%;
    height: 100%;
    line-height: 40px;
    text-align: center;
    display: inline-block;
  }
  .city-arrow-icon {
    margin-left: 4px;
    width: 12px;
    height: 12px;
    display: inline-block;
  }
  .city-arrow-icon:after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    margin-left: 0;
    border: 1px solid #50505a;
    border-top: 0 none;
    border-left: 0 none;
    margin-left: 2px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .content {
    margin-bottom: 58px;
  }
  .sel-lists {
    width: 65%;
    display:-moz-box;
    display: -webkit-box;
    display:box;
  }
  .sel-lists div {
    -moz-box-flex: 1.0;
    -webkit-box-flex: 1.0;
    line-height: 40px;
    text-align: center;
  }
  .move {
    display: inline-block;
    bottom: 0px;
    width: 40%;
    border-bottom: 3px solid #ff4d64;
    -webkit-transition: left 0.7s ease-in-out;
    transition: left 0.7s ease-in-out;
  }
  .click-load-more {
    height: 42px;
    line-height: 42px;
    text-align: center;
    color: #333;
    font-size: 15px;
    background-color: #fff;
    margin: 5px 0 8px;
  }
  .loading-icon span {
    vertical-align: middle;
  }
</style>
